<template>
    <div class="template-layout">

        <!-- 贴顶导航 -->
        <UserFixedHead title="Product templates" />

        <!-- 贴顶表单 -->
        <UserFixedForm padding="0 180px">
            <UserSearchName v-model="form.name" size="medium" shape="solid" placeholder="Template"
                            @change="doSearch('name')" />
            <UserSearchButton size="medium" shape="text" name="New template" icon="user-template-new"
                              @click="newTemplate()" />
        </UserFixedForm>

        <!-- 初始化 -->
        <UxIniting v-if="!inited" />

        <!-- 空数据 -->
        <div class="template-nodata" v-else-if="empty">
            <h2>Product templates</h2>

            <div class="template-nodata-new">
                <blockquote>
                    <strong>Manage product templates</strong>
                    <span>Manage all your product templates here and utilize them in any way you prefer.</span>
                    <!-- <button type="primary" @click="newTemplate()">
                        <img src="@/assets/images/template/template-add.png" alt="">
                        <em>New template</em>
                    </button> -->

                    <UserSearchButton size="large" shape="solid" name="New template" icon="user-template-new"
                                      @click="newTemplate()" />

                </blockquote>
                <figure><img src="@/assets/images/template/template-new.png" alt=""></figure>
            </div>

            <div class="template-nodata-design">
                <h3>Make your clothes shine with our Design Creator</h3>
                <ul>
                    <li>
                        <figure><img src="@/assets/images/template/template-layer.png" alt=""
                                 style="max-height:200px ;"></figure>
                        <strong>Larger design size</strong>
                        <span>Up to 16" x 21" for a single print</span>
                    </li>
                    <li>
                        <figure><img src="@/assets/images/template/template-areas.png" alt=""></figure>
                        <strong>More printable areas</strong>
                        <span>A maximum of 18 print areas per garment</span>
                    </li>
                </ul>
            </div>
        </div>

        <template v-else>

            <h2>Product templates</h2>

            <!-- 搜索 -->
            <div class="template-form">

                <UserSearchName v-model="form.name" size="large" shape="plain" placeholder="Template"
                                @change="doSearch('name')" />

                <UserSearchStore v-model="form.shop_id" placeholder="Synced stores" @change="doSearch('shop_id')" />

                <TemplateSearchProduct v-model="form.spu" @change="doSearch('spu')" />

                <UserSearchButton size="large" shape="solid" name="New template" icon="user-template-new"
                                  @click="newTemplate()" />

            </div>

            <!-- 搜索结果 -->
            <div class="template-match" v-show="searching">
                <span v-text="form.total"></span>
                <em v-if="form.total > 1"> matches found</em>
                <em v-else> match found</em>
            </div>

            <!-- 表格 -->
            <div class="template-table">

                <div class="table-title">
                    <span>Template</span>
                    <span>Product information</span>
                    <span>Designs</span>
                    <span>Synced stores</span>
                    <span>
                        <em>Price</em>
                        <UxToolTip content="Shipping and taxes excluded." placement="top" />
                    </span>
                    <span>Actions</span>
                </div>

                <ul class="table-body">

                    <li v-for="item in table" :key="item.id" @click="openDetail($event, item)"
                        :class="{ 'table-brand': item.tag_design_info || item.pack_design_info }">

                        <div class="table-model">
                            <CommonTemplatePreview :pieces.sync="item.design_list" :models="item.model_img"
                                                   :colors="item.color_list" :baseColor="getColorPreview(item)" />
                            <UxTemplateInputInline v-model="item.template_name"
                                                   @focus="item.cache_name = item.template_name;"
                                                   @change="updateName($event, item)" @blur="updateName($event, item)">
                            </UxTemplateInputInline>
                        </div>

                        <div class="table-info">
                            <h3 v-text="item.title" :spu="item.spu"></h3>
                            <p>
                                <span>Colors：</span>
                                <strong v-text="item.color_list.length + ' colors'"></strong>
                            </p>
                            <p>
                                <span>Size：</span>
                                <strong v-text="item.size_scope"></strong>
                            </p>
                        </div>
                        <div class="table-design">
                            <CommonSurfacePreview :design="item.design_list" />
                        </div>

                        <div class="table-async">
                            <TemplateAsyncList :list="item.shop_list" />
                        </div>

                        <div class="table-cost">
                            <CommonLevelDiscount :price="item.cost" :blank="item.is_blank" :level="item"
                                                 type="unit|discount|icon" />
                        </div>

                        <div class="table-operat">
                            <button @click="store = item">Add to store</button>
                            <button @click="makeOrder(item)">Order</button>
                            <button @click="branding = item">Branding</button>

                            <UxPopper placement="top" :offset="[6, 6]" :close-on-click="true">
                                <button><i class="iconfont icon-gengduodingdanguanli"></i></button>
                                <div class="table-more" slot="pop">
                                    <!-- <button @click="edit = {item:item,name:item.template_name}">Edit name</button> -->
                                    <!-- 空白模板时不展示Edit -->
                                    <TemplateActionEdit v-show="!item.is_blank" :item="item" @reload="getData()" />
                                    <button @click="copyItem(item)">Duplicate</button>
                                    <TemplateActionRemove :item="item" @reload="getData()" />
                                </div>
                            </UxPopper>

                        </div>
                        <CommonBrandPreview v-if="item.tag_design_info || item.pack_design_info"
                                            :tag="item.tag_design_info" :pack="item.pack_design_info" />

                        <UxLoadingInline :loading="item.loading" />

                    </li>
                </ul>

                <UxSearchEmpty v-if="table.length == 0" />

                <!-- 分页 -->
                <CommonPage v-show="form.total > form.size" @current-change="changePage('page', $event)"
                            :current-page.sync="form.page" :page-size="form.size" :total.sync="form.total"></CommonPage>
            </div>

            <UxLoading2 :loading="loading" />

        </template>

        <!-- 同步到店铺 -->
        <UserSyncStore v-model="store" />

        <!-- 下单选择订单类型 -->
        <UserMakeOrder v-model="order" />

        <!-- 增值服务弹窗 -->
        <BrandingBindProduct v-model="branding" v-if="branding" source="template" @update="getData()" />
    </div>
</template>
<script>
export default {
    name: "UserTemplate",
    layout: "layout-user",
    data () {
        return {
            inited: false,
            empty: true,
            searching: false,
            loading: true,
            rename: null,
            store: null, // 同步到店对话框
            order: null, // 下单对话框
            remove: null, // 删除对话框
            update: null, // 编辑更新对话框
            branding: null,// 吊牌、包装对话框
            hangTagSelect: null, // hangTagSelect
            hangTags: null,//吊牌数据
            packages: null,//包装数据
            storeList: [],
            request: null, // 缓存请求
            form: {
                name: "",
                spu: '',
                shop_id: 0,
                page: 1,
                size: 10,
                total: 0,
            },
            table: [],
        };
    },
    methods: {

        // 编辑名字
        async updateName (event, item) {
            let value = (item.template_name || '').trim()

            if (item.loading == true) {
                // 正在加载中的不管
            } else if (item.cache_name == value) {
                // 值相同的不管
            } else if (!/[\w\W]+/.test(value)) {
                item.template_name = item.cache_name;
                this.$uxMessage.error("At least one character");
            } else {
                item.loading = true;
                let response = await this.$http("storeTemplate.putName/" + item.id, { name: value });

                if (response.code === 0) {
                    item.loading = false;
                    // item.input = false;
                    item.cache_name = value;
                    this.$uxMessage.success("Template renamed successfully");
                } else {
                    item.loading = false;
                    this.$uxMessage.error("Failed to rename template");
                }
            }
        },

        // 复制一条
        async copyItem (item) {
            item.loading = true;
            this.update = false;
            let response = await this.$http("storeTemplate.postCopy", item.id);
            if (response.code === 0) {
                this.getData();
                this.$uxMessage.success("Template duplicated successfully");
            } else {
                item.loading = false;
                this.$uxMessage.error("Failed to duplicate template");
            }
        },

        async doSearch (key) {
            this.form.page = 1;
            await this.getData()
            window && window.scrollTo(0, 0)
        },

        // 筛选标签
        getModesByTag (models, tag) {
            const tag_name = tag || 'hanging';
            const tag_able = ['hanging', 'flat lay', 'model'].filter(i => models.find(m => (m.model_tag || 'hanging') == i))
            const tag_active = tag_able.indexOf(tag_name) >= 0 ? tag_name : tag_able[0];
            return models.filter(m => (m.model_tag || 'hanging') == tag_active)
        },


        // 获取数据
        async getData () {
            this.loading = true;
            const route = this.$route.query || {}
            const request = {
                page_num: this.form.page,
                page_size: this.form.size,
                name: (this.form.name || '').trim(),
                spu: this.form.spu,
                shop_id: this.form.shop_id > 0 ? this.form.shop_id : '',
            };

            route.name = (route.name || '').trim();
            route.page = parseInt(route.page) || 1;

            // 如果router发生了改变
            if (route.name != request.name || route.page != request.page_num) {
                const form = {};
                request.name && (form.name = request.name);
                request.page_num > 1 && (form.page = request.page_num);
                this.$router.replace({ path: this.$route.path, query: form });
            }

            let response = await this.$http("storeTemplate.getList", request);
            if (response.code === 0) {

                this.table = (response.data || []).map((item) => {

                    let size_list = (item.size_list || []).sort((a, b) => a.sort - b.sort);
                    let color_list = (item.color_list || []).sort((a, b) => a.sort - b.sort);


                    item.loading = false; // 预设loading状态
                    item.color_list = color_list;
                    item.size_list = size_list || [];
                    item.design_list = item.design_list || [];
                    item.model_img = item.model_img || [];
                    item.shop_list = item.shop_list || [];
                    item.color_base = item.show_color_num;

                    item.high_price = parseFloat(item.high_price);
                    item.low_price = parseFloat(item.low_price);

                    if (item.high_price == item.low_price) {
                        item.cost = item.low_price + item.extra_price;
                    } else {
                        item.cost = [item.low_price + item.extra_price, item.high_price + item.extra_price].join('-');
                    }


                    if (item.size_list.length <= 1) {
                        item.size_scope = (item.size_list[0] || {}).size_name || "--";
                    } else {
                        let last_index = Math.max(0, item.size_list.length - 1);
                        let first_size = item.size_list[0].size_name || "";
                        let last_size = item.size_list[last_index].size_name || "";
                        item.size_scope = [first_size, last_size].join("-");
                    }

                    // item.model_img.map((design) => {
                    //   if (!item.head_image && design.model_url) {
                    //     item.head_image = design.model_url;
                    //   }
                    // });

                    return item;
                });

                this.loading = false;
                this.form.total = response.total;
                this.empty = this.table.length == 0 && !request.name && !request.shop_id && !request.spu && this.form.total == 0;
                this.searching = request.name || request.shop_id || request.spu;

                // this.$uxMessage.success(response.msg || "success");
                // 跳转
            } else {
                this.inited = true;
                this.loading = false;
                this.$uxMessage.error("Failed to load templates");
                // 提示
            }
        },

        getColorPreview (item) {
            const color = item.color_base;
            const list = item.color_list || [];
            const select = list.filter((i) => i.color_num == color || i.color_id == color);
            return select[0] || list[0];
        },

        // 生成订单
        makeOrder (item) {
            this.order = {
                spu: item.spu, //商品的SPU用于确认SKU
                title: item.title, //标题
                model_img: item.model_img, // 模特列表
                design_list: item.design_list, //设计信息
                source: "template", //商品来源
                design_id: item.id, //商品来源
                extra_price: item.extra_price, // 设计面价格
                is_blank: item.is_blank, // 是否为空白模板
                color_base: item.color_base, // 选中的颜色
                tag: item.tag_design_info, // 吊牌
                pack: item.pack_design_info // 包装
            };
        },

        // 分页数据改变
        changePage (type, value) {
            const page = parseInt(value) || 1;
            if (this.form.page != page) {
                this.form.page = page;
                this.getData().then(res => window.scrollTo(0, 0))
            }
        },

        // 打开详情页
        openDetail (event, item) {
            const target = event.target;
            if (target.closest('.input-inline')) {
                // 标题不进入
            } else if (target.closest('.table-design button')) {
                // 打印面预览
            } else if (target.closest('.table-operat button')) {
                // 其他按钮
            } else if (target.closest('.async-list blockquote')) {
                // 同步店铺的更多按钮
            } else if (target.closest('.surface-preview')) {
                // 设计区
            } else if (target.closest('.brand-preview > li .popper')) {
                // 品牌按钮点击拦截
            } else if (target.closest('.tooltip-content')) {
                // 自定义图层
            } else if (item.loading) {
                // 如果在改名字，则取消改名
                // } else if (target.closest('table').querySelector('.input-inline.focus')) {
                // 其他有正在编辑的都不能跳转
                // this.rename && (this.rename = null);
            } else {
                this.$router.push({ path: '/user/template/detail', query: { tid: item.id } });
            }
        },
        newTemplate () {
            this.$emit('global:productDialogOpen')
        },


        // 包装袋与吊牌测试位置
        test () {

            const dpi = 300
            const mmToPx = (number, dpi_value) => {
                return Math.floor((Number(number) / 25.4) * dpi_value);
            };

            const option = {
                canvasWidth: mmToPx(2497, dpi),
                canvasHeight: mmToPx(207, dpi),
                packWidth: mmToPx(203, dpi),
                packHeight: mmToPx(203, dpi),
                tag_xoffset: 0,
                tag_yoffset: 0,
                packToTag: mmToPx(19, dpi),
                packToPack: mmToPx(110, dpi),
                baseUrl: 'https://pod-product.oss-accelerate.aliyuncs.com/',
            };

            const tagOption = { xoffset: mmToPx(1, dpi), yoffset: mmToPx(4, dpi), width: mmToPx(30, dpi), height: mmToPx(53, dpi) };
            const list = [1, 2, 3, 4, 5, 6, 7, 8]

            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d');


            canvas.width = option.canvasWidth;
            canvas.height = option.canvasHeight;
            canvas.style.cssText = ' position: absolute;left: 0;top: 0;height:200px;z-index:9999;';


            list.map((item, index) => {
                const pack_x = index * (option.packWidth + option.packToPack)
                const pack_y = 0
                const pack_w = option.packWidth;
                const pack_h = option.packHeight;

                const tag_x = pack_x + pack_w + option.packToTag + tagOption.xoffset
                const tag_y = option.canvasHeight - tagOption.yoffset - tagOption.height
                const tag_w = tagOption.width
                const tag_h = tagOption.height

                const pack = { x: pack_x, y: pack_y, w: pack_w, h: pack_h }
                const tag = { x: tag_x, y: tag_y, w: tag_w, h: tag_h }


                ctx.fillStyle = '#f00';
                ctx.fillRect(pack_x, pack_y, pack_w, pack_h)
                ctx.fillRect(tag_x, tag_y, tag_w, tag_h)


                ctx.fillStyle = '#000';
                ctx.font = 'bold 72px serif'
                ctx.fillText('袋:' + JSON.stringify(pack), pack_x + 100, pack_y + 100)
                ctx.fillText('牌:' + JSON.stringify(tag), pack_x + 100, pack_y + 300)

                return {
                    pack: { x: pack_x, y: pack_y, w: pack_w, h: pack_h },
                    tag: { x: tag_x, y: tag_y, w: tag_w, h: tag_h },
                }
            })


            document.body.appendChild(canvas);

        },
    },

    created () {

        // 缓存
        if (process.client) {

            const query = this.$route.query || {}
            const page = parseInt(query.page) || 1;
            const name = query.name || '';

            this.form.page = page;
            this.form.name = name;
            this.getData().then(() => {
                this.inited = true
            })
        }
    },
    mounted () {
        // this.test()
    }
};
</script>
<style lang="scss" scoped>
.template-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 924px;

    &>.loading {
        position: fixed;
        left: 228px;
        top: 0;
        bottom: 0;
        right: 0;
    }

    &>h2 {
        height: 40px;
        font-size: 36px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 40px;
    }

    &>.initing {
        flex: 1;
        width: 100%;
    }

    .user-fixed-form {
        .user-search-button {
            margin-left: 24px;
        }
    }
}

.template-nodata {
    flex: 1;
    position: relative;

    &>h2 {
        height: 40px;
        font-size: 32px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 40px;
    }

    .template-nodata-new {
        display: flex;
        margin-top: 40px;
        padding: 34px 76px 34px 72px;
        box-sizing: border-box;
        min-height: 280px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;

        blockquote {
            flex: 408;
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 22px 0;

            strong {
                font-size: 20px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 22px;
            }

            span {
                margin-top: 16px;
                font-size: 16px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555;
                line-height: 22px;
                flex: 1;
            }

            .user-search-button {
                width: 152px;
                height: 40px;
            }

            // button {
            //     width: 152px;
            //     height: 40px;
            //     border-radius: 8px;
            //     font-size: 16px;

            //     img {
            //         width: 16px;
            //         height: 16px;
            //     }
            // }
        }

        figure {
            flex: 438;
            margin-left: 84px;
            position: relative;

            &::before {
                content: '';
                display: block;
                padding-bottom: 48.4%;
            }

            img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
        }
    }

    .template-nodata-design {
        margin-top: 40px;

        h3 {
            font-size: 18px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 18px;
        }

        ul {
            display: flex;
            margin-top: 18px;
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            padding: 28px;

            li {
                flex: 1;
                display: flex;
                flex-direction: column;

                figure {
                    background: #f8f8f8;
                    border-radius: 6px;
                    position: relative;

                    &::before {
                        content: '';
                        display: block;
                        padding-bottom: 48.19%;
                    }

                    img {
                        position: absolute;
                        height: 100%;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }

                strong {
                    margin-top: 18px;
                    font-size: 16px;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    color: #000000;
                    line-height: 16px;
                }

                span {
                    margin-top: 8px;
                    font-size: 14px;
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    color: #555;
                    line-height: 16px;
                }

                &+li {
                    margin-left: 28px;
                }
            }
        }
    }
}

.template-form {
    margin-top: 40px;
    margin-bottom: 40px;
    position: relative;
    display: flex;

    .user-search-store {
        flex: 280;
        margin-left: 6px;
    }

    .template-search-product {
        flex: 280;
        margin-left: 6px;
    }

    .user-search-button {
        margin-left: 36px;
        min-width: 152px;
    }
}

.template-match {
    font-size: 22px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #000000;
    line-height: 22px;
    margin-bottom: 20px;
}

.template-table {
    flex: 1;
    position: relative;

    &::v-deep .el-loading-mask {
        border-radius: 8px;
        z-index: 1;
    }

    .table-title>span,
    .table-body>li>div {
        padding: 18px;
        position: relative;
        box-sizing: border-box;

        &:nth-child(1) {
            width: 18%;
        }

        &:nth-child(2) {
            width: 20%;
        }

        &:nth-child(3) {
            width: 14%;
        }

        &:nth-child(4) {
            width: 17%;
        }

        &:nth-child(5) {
            width: 15%;
        }

        &:nth-child(6) {
            width: 16%;
        }
    }

    .table-title {
        display: flex;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;

        &>span {
            padding-top: 0;
            padding-bottom: 0;
            text-align: center;
            height: 40px;
            line-height: 40px;
            position: relative;
            white-space: nowrap;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #292929;
            display: flex;
            align-items: center;
            justify-content: center;

            em {
                margin-right: 4px;
            }

            &:nth-child(2) {
                // text-align: left;
                justify-content: flex-start;
            }
        }
    }

    .table-body>li {
        display: flex;
        position: relative;
        align-items: center;
        cursor: pointer;
        margin-top: 12px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        min-height: 238px;
        transition: all 0.2s;

        &:hover {
            box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
        }

        &.table-brand {
            padding-bottom: 40px;
        }

        .loading-inline {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(254, 255, 252, 0.9);
            border-radius: 8px;
        }
    }

    .table-model {
        text-align: center;
        position: initial !important;

        .template-preview {
            width: 100%;
            max-width: 160px;
            position: initial;

            &::v-deep .process-icon {
                left: 12px;
                top: 12px;
            }
        }

        .input-inline {
            margin-top: 8px;
            cursor: default;
        }
    }

    .table-info {
        h3 {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            margin-bottom: 14px;
        }

        p {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 22px;

            strong {
                font-weight: 400;
            }
        }
    }

    .table-design {
        font-size: 14px;
        color: #666666;
        line-height: 16px;
    }

    .table-async {
        position: relative;
    }

    .table-cost {
        .level-discount {
            font-size: 14px;

            &[currency='JPY'] {
                flex-wrap: wrap;

                &::v-deep span {
                    margin: 0;

                    &[name='discount'] {
                        width: 100%;
                        margin: 4px;
                        text-align: center;
                    }
                }
            }
        }
    }

    .table-operat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;

        &>button {
            width: 120px;
            height: 36px;

            &+button {
                margin-top: 10px;
            }
        }

        .popper {
            margin-top: 10px;

            &::v-deep {
                .popper-name {
                    &>button {
                        width: 120px;
                        height: 36px;

                        i {
                            font-size: 24px;
                        }
                    }
                }

                .popper-content {
                    background: #ffffff;
                    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
                    border-radius: 8px;
                    border: 1px solid #ebebeb;
                }

                .arrow {
                    display: none;
                }
            }

            .table-more {
                display: flex;
                flex-direction: column;
                padding: 6px;

                button {
                    border: none;
                    background: none;
                    margin: 0;
                    width: 168px;
                    height: 34px;
                    box-sizing: border-box;
                    padding: 0 8px;
                    font-size: 14px;
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    color: #555555;
                    justify-content: flex-start;

                    &:hover {
                        background: #f6f6f6;
                        color: #000;
                    }
                }
            }
        }
    }

    .brand-preview {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 40px;
        border-radius: 0 0 8px 8px;
        border-top: 1px solid #e5e5e5;
    }
}

.search-empty {
    margin-top: 12px;
}

.common-page {
    padding: 24px 0 0;
    justify-content: flex-end;
}

.dialog-warp {
    width: 320px;
    box-sizing: border-box;
    padding: 20px 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 30px 0;
        text-align: center;

        i {
            width: 72px;
            height: 72px;
            background: #fff4f3;
            border-radius: 72px;
            line-height: 72px;
            font-size: 34px;
            text-align: center;
            color: #f44336;
        }

        strong {
            margin-top: 18px;
            font-size: 16px;

            color: #000000;
            line-height: 18px;
        }

        span {
            margin-top: 12px;
            font-size: 12px;

            color: #999;
            line-height: 18px;
        }

        input {
            margin-top: 8px;
            width: 400px;
            height: 32px;
            box-sizing: border-box;
            padding: 7px 8px;
            line-height: 18px;
            font-size: 14px;
            font-weight: 400;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
        }
    }

    button {
        width: 100%;
        margin-top: 18px;
        height: 40px;
        min-height: 40px;
    }
}

.dialog-remove {
    height: 372px;

    p {
        margin: 17px 0;
    }
}

.dialog-forbid {
    height: 372px;
    box-sizing: border-box;

    p {
        i {
            background: none;
            font-size: 60px;
            color: #ddd;
        }

        strong {
            text-align: center;
            line-height: 24px;
        }
    }
}
</style>
